<template>
  <div>
    <div class="cloud-box">
      <div class="cloud-title">
        <span class="cloudSpan">云端工作需求描述</span>
        <div class="cloudSmallBox"></div>
      </div>
      <!-- ---from -->

      <el-form label-position="top" ref="ruleFormRef" :model="cloudFrom" :rules="rules" status-icon class="cloud-from">
        <el-form-item label="项目名称" prop="name" class="prejectName">
          <el-input v-model="cloudFrom.name" placeholder="请输入项目名称" class="publicInput" />
        </el-form-item>
        <el-form-item label="远程类型：" prop="selectName" class="technology">
          <el-radio-group v-model="cloudFrom.resource" class="radio">
            <el-radio label="兼职" />
            <el-radio label="全职" />
          </el-radio-group>
        </el-form-item>

        <el-form-item label="技术类型与预算报价：" prop="selectName" class="technology">
          <el-select v-model="cloudFrom.selectName" placeholder="请选择技术类型">
            <el-option label="Zone one" value="shanghai" />
          </el-select>
        </el-form-item>
        <el-form-item label="全职时间：" prop="name" class="technology">
          <el-date-picker v-model="cloudFrom.name" type="datetimerange" range-separator="-" start-placeholder="请选择"
            end-placeholder="请选择" />
        </el-form-item>
        <!-- 4个需要输入的 -->
        <el-form-item class="fourInputList" v-if="fourInput.length">
          <div v-for="(item, index) in fourInput" :key="index" class="inputItem">
            <el-input type="text" class="inputFirst" />
            <div>
              <el-input type="text" class="inputSecond" />
              <span class="leftText">人</span>
            </div>
            <div>
              <el-input type="text" class="inputSecond" />
              <span class="leftText">年工作经验</span>
            </div>
            <div>
              <el-input type="text" class="inputSecond" />
              <span class="leftText">元/人天</span>
            </div>
            <el-icon color="#FC4C00" size="18">
              <RemoveFilled />
            </el-icon>
          </div>
        </el-form-item>
        <el-form-item label="技能标签(1-5个)：" prop="names" class="prejectName">
          <el-input v-model="cloudFrom.names" placeholder="输入后根据提示选择关键词" class="publicInput" />
        </el-form-item>

        <el-form-item label="教育背景：" prop="name" class="prejectName">
          <el-input v-model="cloudFrom.name" placeholder="输入后根据提示选择关键词" class="publicInput" />
        </el-form-item>
        <el-form-item label="名企背景：" prop="name" class="prejectName">
          <el-input v-model="cloudFrom.name" placeholder="输入后根据提示选择关键词" class="publicInput" />
        </el-form-item>

        <el-form-item label="填写任务描述（简短的描述您的需求）：" prop="selectName" class="technology">
          <el-input v-model="cloudFrom.name" class="mission" />
        </el-form-item>

        <el-form-item label="上传附件：" prop="selectName">
          <el-upload ref="uploadRef" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" drag
            :auto-upload="false">
            <template #default>
              <div class="upload-demo">
                <el-button type="primary" class="btnIcon">
                  <el-icon>
                    <Download />
                  </el-icon>
                </el-button>
                <span class="upload-text">
                  将文件拖到此处，或
                  <span class="upload-small">点击上传</span>
                  传需求文档
                </span>
              </div>
            </template>
          </el-upload>
        </el-form-item>

        <el-form-item label="期待完结时间：" prop="selectName" class="selecTime">
          <el-select v-model="cloudFrom.selectName" placeholder="请选择日期">
            <el-option label="Zone one" value="shanghai" />
          </el-select>
        </el-form-item>
      </el-form>

      <!-- ---from -->
      <div class="submit">
        <el-button type="primary" class="save" @click="submitForm(ruleFormRef)">暂时保存</el-button>
        <el-button type="primary" class="demand" @click="submitForm(ruleFormRef)">提交需求</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
const ruleFormRef = ref();
const cloudFrom = ref({});
const fourInput = ref([{}, {}]);
const rules = reactive({
  name: [
    {
      required: true,
      message: "项目名称不能为空",
      trigger: "blur",
    },
  ],
  selectName: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "blur",
    },
  ],
});
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    console.log(valid, fields, "----");
  });
};
</script>

<style lang="scss" scoped>
.cloud-box {
  margin-top: 35px;
  margin-bottom: 40px;
  padding: 0 24px;
  width: 1152px;
  min-height: 770px;
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 40px;
}

.cloud-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 20px;
  color: #165dff;
  font-style: normal;
  text-transform: none;
  position: relative;
  width: 170px;
  height: 60px;
  display: flex;
  align-items: center;

  .cloudSpan {
    position: absolute;
    bottom: 30px;
  }

  .cloudSmallBox {
    position: absolute;
    width: 144px;
    height: 6px;
    background: #fcc500;
  }
}

.cloud-from {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

// 项目名称
.prejectName {
  width: 556px;
}

// 技术类型
.technology {
  width: 556px;
}

// 付费类型
.payType {
  width: 459px;

  .payInput {
    width: 412px;
  }

  .unit {
    margin-left: 16px;
  }
}

// .4个需要输入的
.fourInputList {
  width: 556px;
  display: flex;
  flex-direction: column;
}

.inputItem {
  width: 100%;

  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.inputFirst {
  width: 118px;
  height: 36px;
  background: #f5f5f5;
  border-radius: 6px;
}

.inputSecond {
  width: 68px;
  height: 36px;
  background: #f5f5f5;
  border-radius: 6px;
}

.leftText {
  margin-left: 4px;
}

.mission {
  height: 88px;
}

.publicInput {
  height: 48px;
  background: #f5f7fa;
}

.radio {
  height: 48px;
}

.siteTop {
  margin-top: 8px;
}

.upload-demo {
  width: 556px;
  height: 100px;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.btnIcon {
  width: 40px;
  height: 40px;
}

.upload-text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #86909c;
  font-style: normal;
  text-transform: none;
}

.upload-small {
  color: #165dff;
}

.submit {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  font-style: normal;
  text-transform: none;
}

.save {
  width: 88px;
  height: 38px;
  background: #fff;
  border-radius: 6px;
  color: #165dff;
}

.demand {
  width: 88px;
  height: 38px;
  background: #165dff;
  border-radius: 6px;
  color: #fff;
}
.selecTime{
  margin-top: -50px;
  width: 556px;
}
</style>
<style scoped>
:deep(.el-select__wrapper) {
  min-height: 48px;
  background-color: #f5f7fa;
}

:deep(.el-input__wrapper) {
  background-color: #f5f7fa;
}

:deep(.el-upload-dragger) {
  width: 556px;
  height: 148px;
  background-color: #f5f7fa;
}

:deep(.el-range-editor) {
  height: 48px;
  border-radius: 6px;
}
</style>